<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>line</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script type="importmap">
        {
            "imports": {
              "three": "./test/build/three.module.js",
              "three/addons/": "./test/jsm/"
            }
          }
    </script>
    <!-- <script type="importmap">
        {   
            "imports": {
              "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
              "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
            }
          }
    </script> -->
    <script type="module">
        import * as THREE from 'three';
        import Stats from 'three/addons/libs/stats.module.js';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 创建场景对象
        const scene = new THREE.Scene();

        // 创建辅助观察坐标系
        const axesHelper = new THREE.AxesHelper(200);
        scene.add(axesHelper);
        scene.background = new THREE.Color('#ccc');
        const material = new THREE.LineBasicMaterial({ color: 'yellow' });
        const points = [];
        points.push(new THREE.Vector3(- 10, 0, 0));
        points.push(new THREE.Vector3(0, 10, 0));
        points.push(new THREE.Vector3(10, 0, 0));
        points.push(new THREE.Vector3(15, 15, 20));
        points.push(new THREE.Vector3(20, 0, 0));

        const geometry = new THREE.BufferGeometry().setFromPoints(points);
        const line = new THREE.Line( geometry, material );
        scene.add( line );
        // 创建透视相机
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000000);
        camera.position.set(40, 40, 40);
        camera.up.x = 0;
        camera.up.y = 0;
        camera.up.z = 1;
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        // 创建性能监控对象
        const stats = new Stats();
        document.body.appendChild(stats.domElement);

        // 创建WebGL渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });

        // 创建轨道控制对象
        const controls = new OrbitControls(camera, renderer.domElement);

        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.render(scene, camera);
        document.body.appendChild(renderer.domElement);


        // 动画函数，用于不断更新场景和渲染
        const animate = () => {
            stats.update();
            controls.update();
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
        };
        animate();
    </script>
</body>

</html>